<template>
	<scroll-view class="index" scroll-y @scrolltolower="loadMore()">
		<view class="index-bd">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in rankDatas" :key="key"  @click="goTo(item)">
					<view class="col col_1" v-if="item.rankNo == 1" style="background-image: url(../../../static/image/found/rank/r1.png);">{{item.rankNo}}</view>
					<view class="col col_2" v-else-if="item.rankNo == 2" style="background-image: url(../../../static/image/found/rank/r2.png);">{{item.rankNo}}</view>
					<view class="col col_3" v-else-if="item.rankNo == 3" style="background-image: url(../../../static/image/found/rank/r3.png);">{{item.rankNo}}</view>
					<view class="col col_4" v-else>{{item.rankNo}}</view>
					<view class="uni-list-cell-navigate uni-navigate-right uni-media-list"> 
						<image class="uni-media-list-logo" :src="item.baseUrl+item.imgUrl"></image>
						<view class="uni-media-list-body" >
							<view class="uni-media-list-text-top">{{item.nickname}}</view>
							<view class="uni-media-list-text-bottom" v-if="item.rankType == 1">{{rankTypes[item.rankType]}}值:{{item.totalContributionValue}}</view>
							<view class="uni-media-list-text-bottom" v-if="item.rankType == 0">{{rankTypes[item.rankType]}}值:{{item.totalCharmValue}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>	
	</scroll-view>
</template>

<script>
	import {rank} from '../../api/ucenter/index';
	import {getUrl} from '../../common/oss';
	export default {
		data() {
			return {
				page: 1, 
				pageSize: 10,
				rankNo: 1,
				indexNo: 0,
				rankDatas:[],
				rankTypes:[
				 "魅力",
				 "贡献"
				],
				title: "",
				orderByFields: ["totalCharmValue","totalContributionValue"]
			}
		},
		onLoad:function(e){
			this.indexNo = e.navigateValue;
			this.title = this.rankTypes[this.indexNo];
			console.log(this.orderByFields[this.indexNo]);
			console.log(this.indexNo)
			console.log(JSON.stringify(e));
			var title = this.title+"榜"
			this.loadRank(this.page, this.pageSize, this.orderByFields[this.indexNo], "desc")
			uni.setNavigationBarTitle({
				title: title,
				success: () => {
					console.log('setNavigationBarTitle success')
				},
				fail: (err) => {
					console.log('setNavigationBarTitle fail, err is', err)
				}
			})
		},
		onUnload:function(){
			this.page = 1;
			this.title ="";
			this.rankDatas = []
			this.indexNo = -1;
			this.rankNo = 0;
		},
		onPullDownRefresh:function(){
			this.page = 1;
			this.rankDatas = []
			this.rankNo = 0;
			
			this.loadRank(this.page, this.pageSize, this.orderByFields[this.indexNo], "desc")
		},
		methods:{
			loadRank: function(page, pageSize, orderBy, sort){
				var   that = this;
				let params = {
					hasExitsBoard: 'N'
				};
				params.page = page;
				params.limit = pageSize;
		
				params.orderBy = orderBy;
				params.sort = sort;
				rank(params).then(function(res){
					if(res.data.length > 0){
						for(var i = 0; i < res.data.length; i++,that.rankNo++) {
							console.log(JSON.stringify(res.data[i]))

							res.data[i].rankNo = that.rankNo;
							
							res.data[i].rankType = that.indexNo;
							res.data[i].baseUrl = getUrl(res.data[i].baseUrl)
							that.rankDatas.push(res.data[i])
						}
						console.log("xxx"+JSON.stringify(that.rankDatas))
						that.page++;
					}
				})
			},
			loadMore: function(){
				this.loadRank(this.page, this.pageSize, this.orderByFields[this.indexNo], "desc")
			},
			goTo: function(e){
				
			}
		},
	}
</script>

<style>
	@import "../../common/uni.css";
	
	.index {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		width: 750px;
		height: 100%;
	}
	
	.index-bd {
		
		width: 750px;
		height: 100%;
	}
	
	/* .uni-list {
		width: 710px !important;
		margin: 20px;
		border-radius: 15px;
	} */
	
	/* .uni-media-list-logo {
		width: 50px !important;
		height: 50px !important;
	} */
	
	/* .uni-media-list-body {
		height: 36px;
		line-height: 36px;
		font-size: 28px !important;
		justify-content: space-around;
	} */
	
	/* .uni-media-list-text-top {
		height: 50px !important;
		
		overflow: hidden;
	} */
	
	.col {
		width: 84px;
		height: 84px;
		text-align: center;
		font-size: 44px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 84px 84px;
	}

	.col_1[title="1"] {
		color: white ;
		line-height: 72px;
	}
	
	.col_1[title="2"] {
		color: white ;
		line-height: 72px;
	}
	
	.col_1[title="3"] {
		color: #FFFFFF;
		line-height: 72px;
	}
	
	.col_4 {
		width: 84px;
		text-align: center;
		color: #f9500d;
		font-size: 54px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.cur section {
		color: #fff;
	}
</style>
